<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamics Diagram</title>
</head>
<body>
<canvas id="thermoCanvas" width="500" height="300"></canvas>
<script>
    const canvas = document.getElementById('thermoCanvas');
    const ctx = canvas.getContext('2d');

    // --- Configuration ---
    const startX = 50;
    const startY = 50;
    const containerWidth = 400;
    const containerHeight = 150;
    const partitionWidth = 10;
    const mainLineWidth = 2;

    // Center of the container
    const centerX = startX + containerWidth / 2;
    const centerY = startY + containerHeight / 2;

    // Partition coordinates
    const partitionX = centerX - partitionWidth / 2;

    // --- Helper function to draw stippled pattern ---
    function drawStipples(x, y, w, h) {
        ctx.save();
        ctx.beginPath();
        ctx.rect(x, y, w, h);
        ctx.clip(); // Clip to the drawing area

        const density = 0.15; // dots per pixel area
        const numDots = Math.floor(w * h * density);

        ctx.fillStyle = '#333';
        for (let i = 0; i < numDots; i++) {
            const dotX = x + Math.random() * w;
            const dotY = y + Math.random() * h;
            // Draw a small ellipse to mimic the original texture
            ctx.beginPath();
            ctx.ellipse(dotX, dotY, 1.2, 0.6, Math.random() * Math.PI, 0, 2 * Math.PI);
            ctx.fill();
        }
        ctx.restore();
    }

    // --- Drawing ---

    // 1. Draw stipples for gas in sections A and B
    const sectionA_Width = containerWidth / 2 - partitionWidth / 2;
    const sectionB_X = partitionX + partitionWidth;
    const sectionB_Width = containerWidth / 2 - partitionWidth / 2;
    
    drawStipples(startX, startY, sectionA_Width, containerHeight);
    drawStipples(sectionB_X, startY, sectionB_Width, containerHeight);


    // 2. Draw the main container outline
    ctx.lineWidth = mainLineWidth;
    ctx.strokeStyle = 'black';
    ctx.strokeRect(startX, startY, containerWidth, containerHeight);


    // 3. Draw the partition
    // Fill to hide stipples underneath
    ctx.fillStyle = 'white';
    ctx.fillRect(partitionX, startY, partitionWidth, containerHeight);
    
    // Outline
    ctx.strokeRect(partitionX, startY, partitionWidth, containerHeight);
    
    // Hatching lines inside the partition
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    const hatchStep = 12;
    for (let y = startY; y < startY + containerHeight; y += hatchStep) {
        ctx.moveTo(partitionX, y);
        ctx.lineTo(partitionX + partitionWidth, y + hatchStep * 0.8);
    }
    ctx.stroke();


    // 4. Draw labels 'A' and 'B'
    ctx.fillStyle = 'black';
    ctx.font = '28px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Label A
    const a_centerX = startX + sectionA_Width / 2;
    ctx.fillText('A', a_centerX, centerY);

    // Label B
    const b_centerX = sectionB_X + sectionB_Width / 2;
    ctx.fillText('B', b_centerX, centerY);


    // 5. Draw the caption
    ctx.font = '24px "KaiTi", "SimSun", serif'; // Use fonts that support Chinese characters
    const captionY = startY + containerHeight + 40;
    ctx.fillText('习题 5-9 图', centerX, captionY);

</script>
</body>
</html>